<template>
    <div class="app-container">
        <el-dialog
                :title="$t('pandian')"
                :visible.sync="dialogVisible"
                :show-close="false"
                destroy-on-close
                width="80%"
                >
            <el-button type="primary" icon="el-icon-plus" @click="dialogVisible1 = true">{{$t('add')}}</el-button>
            <el-select v-model="warehouse" placeholder="Warehouse">
                <el-option
                        v-for="item in warehouseList"
                        :key="item.id"
                        :label="item.warehouseName"
                        :value="item.id">
                </el-option>
            </el-select>
            <el-table
                    :data="recordList"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="checkDate"
                        label="Date"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="differenceQuantity"
                        label="Different Qty"
                       >
                </el-table-column>
                <el-table-column
                        prop="originalQuantity"
                        label="Origin Qty">
                </el-table-column>
                <el-table-column
                        prop="realQuantity"
                        label="Real Qty">
                </el-table-column>
                <el-table-column
                        prop="warehouse"
                        label="Warehouse">
                    <template slot-scope="scope">
                        {{getWarehouse(scope.row.warehouse)}}
                    </template>
                </el-table-column>
                <el-table-column
                >
                    <template slot-scope="scope">
                        <el-button type="danger" @click="deleteRecord(scope.row.id)">Delete</el-button>
                    </template>
                </el-table-column>
            </el-table>
                <span slot="footer" class="dialog-footer">
                     <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
          </span>
        </el-dialog>
        <el-dialog
                :visible.sync="dialogVisible1"
                width="50%"
                >
            <el-form ref="form" :model="inventory" :rules="rules" label-width="120px">
                <el-form-item label="Real Qty" prop="realQuantity">
                    <el-input v-model="inventory.realQuantity" placeholder="Real Quantity"></el-input>
                </el-form-item>
                <el-form-item label="Warehouse" prop="warehouse">
                    <el-select v-model="inventory.warehouse" placeholder="Warehouse">
                        <el-option
                                v-for="item in warehouseList"
                                :key="item.id"
                                :label="item.warehouseName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Inventory Date">
                    <el-date-picker
                            v-model="inventory.checkDate"
                            type="date"
                            value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submit">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import {inventoryRecord, addNewInventory,deleteInventoryRecord} from "../../api/inventory";
    import {getWarehouseList} from "../../api/warehouse";
    import {ERROR_OK} from "../../util/config";
    import * as moment from "moment";

    export default {
        name: "inventory-record",
        props: {
            part: {
                type: Object,
            },
            belongModule: {
                type:Number
            }
        },
        inject:['getList'],
        data() {
            return {
                dialogVisible:false,
                dialogVisible1:false,
                warehouseList: [],
                warehouse:undefined,
                recordList:[],
                inventory:{
                    partsId:this.part.partsId,
                    realQuantity:0,
                    checkDate:moment().format('YYYY-MM-DD'),
                    belongModule:this.belongModule,
                    warehouse:undefined,
                },
                rules:{
                    warehouse:[{
                        required:true
                    }],
                    realQuantity:[{
                        required:true
                    }]
                }
            }
        },
        methods: {
            async deleteRecord(id){
                this.$confirm('Delete this Record').then(async ()=>{
                    const {status} = await deleteInventoryRecord(id)
                    if(status === ERROR_OK) {
                        this.getRecordList()
                        this.$message.success("Delete Success")
                    }
                }).catch()
            },
            getWarehouse(warehouse){
                const target = this.warehouseList.find(item=>item.id===warehouse)
                return target ? target.warehouseName : ''
            },
            clear(){
                this.inventory = {
                    partsId:this.part.partId,
                    realQuantity:0,
                    checkDate:moment().format('YYYY-MM-DD'),
                    belongModule:this.belongModule,
                    warehouse:undefined,
                }
            },
            submit(){
                this.$refs.form.validate(async valid => {
                    if (valid){
                        const {status,msg} = await addNewInventory({...this.inventory,partsId:this.part.partsId})
                        if (status === ERROR_OK) {
                            this.getList()
                            this.$message.success(this.$t('success'))
                            this.clear()
                            this.dialogVisible = false
                            this.dialogVisible1 = false
                        } else {
                            this.$message.error(msg)
                        }
                    }
                })
            },
            open(){
                this.dialogVisible = true
                this.getWarehouseList()
                this.getRecordList()
            },
            async getWarehouseList(){
                const {status, data} = await getWarehouseList()
                if (status === ERROR_OK) {
                    this.warehouseList = data
                }
            },
            async getRecordList() {
                const {belongModule,warehouse} = this
                const {status,data} =  await inventoryRecord({partsId:this.part.partsId,belongModule,warehouse})
                if (status === ERROR_OK) {
                    this.recordList = data
                } else {
                    this.recordList = []
                }
            }
        },
    }
</script>

<style scoped>

</style>